﻿<!DOCTYPE html />
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chinese Chess</title>
    <link href="Styles/jquery.mobile-1.2.0.css" rel="stylesheet" />
    <link href="Styles/jquery.mobile.structure-1.2.0.css" rel="stylesheet" />
    <link href="Styles/jquery.mobile.theme-1.2.0.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="Scripts/chess.js" type="text/javascript"></script>
    <script src="Scripts/plugins/jquery.mobile.chineseChess.js" type="text/javascript"></script>
    <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        body
        {
            background: #eee;
        }
        #main
        {
            margin: 20px auto;
            width: 460px;
        }
        canvas
        {
            margin: 0 auto;
            width: auto;
            border: 2px solid #ddd;
            -webkit-tap-highlight-color: transparent;
        }
    </style>
    <script type="text/javascript">
//        $(document).ready(function (e) {
//            var chessGame = new ChessGame("board");
//        });
    </script>
</head>
<body>
    <div data-role="page">
        <div data-theme="c" data-role="header">
            <h1 style="margin: 0; font-size: 22px; line-height: 42px">
                Chess Prototype</h1>
        </div>
        <div data-role="content" style="padding: 0">
            <canvas width="460" height="510" data-role="chineseChess">
            </canvas>
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
            <h3>
                Footer
            </h3>
        </div>
    </div>
</body>
</html>
